<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 基础结构</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav>
        <a href="index.html">首页</a>
        <a href="html5-text-tags.html">文本标签</a>
        <a href="html5-links-images.html">链接和图像</a>
        <a href="html5-lists.html">列表</a>
        <a href="html5-tables.html">表格</a>
        <a href="html5-forms.html">表单</a>
        <a href="html5-semantic-tags.html">语义化标签</a>
        <a href="html5-multimedia.html">多媒体标签</a>
    </nav>

    <h1>HTML5 基础结构</h1>
    
    <section>
        <h2>文档类型声明</h2>
        <div class="example">
            <h3>示例：</h3>
            <div class="code">
                &lt;!DOCTYPE html&gt;
            </div>
            <p>这是 HTML5 的文档类型声明，比之前的版本简洁得多。它告诉浏览器这个文档使用的是 HTML5 规范。</p>
        </div>
        
        <div class="note">
            <p><strong>注意：</strong> 文档类型声明必须位于 HTML 文档的第一行，在 &lt;html&gt; 标签之前。它不区分大小写。</p>
        </div>
    </section>
    
    <section>
        <h2>基本 HTML5 文档结构</h2>
        <div class="example">
            <h3>示例：</h3>
            <div class="code">
                &lt;!DOCTYPE html&gt;<br>
                &lt;html lang="zh-CN"&gt;<br>
                &lt;head&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="UTF-8"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;HTML5 文档&lt;/title&gt;<br>
                &lt;/head&gt;<br>
                &lt;body&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- 内容放在这里 --&gt;<br>
                &lt;/body&gt;<br>
                &lt;/html&gt;
            </div>
            
            <h3>结构说明：</h3>
            <ul>
                <li><strong>&lt;html&gt;</strong> - 根元素，包含整个 HTML 文档</li>
                <li><strong>lang 属性</strong> - 指定文档的语言，有助于搜索引擎和浏览器</li>
                <li><strong>&lt;head&gt;</strong> - 包含文档的元数据，如标题、字符集、样式表等</li>
                <li><strong>&lt;meta&gt;</strong> - 提供关于 HTML 文档的元数据</li>
                <li><strong>&lt;title&gt;</strong> - 定义文档的标题，显示在浏览器标签页上</li>
                <li><strong>&lt;body&gt;</strong> - 包含文档的可见内容</li>
            </ul>
        </div>
        
        <div class="preview">
            <h3>预览：</h3>
            <p>这是一个基本的 HTML5 文档结构。实际预览中，您会看到一个空白页面，因为我们还没有在 body 中添加任何可见内容。</p>
        </div>
    </section>
    
    <section>
        <h2>重要的 meta 标签</h2>
        <div class="example">
            <h3>示例：</h3>
            <div class="code">
                &lt;!-- 字符编码 --&gt;<br>
                &lt;meta charset="UTF-8"&gt;<br><br>
                
                &lt;!-- 响应式设计 --&gt;<br>
                &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br><br>
                
                &lt;!-- 页面描述 --&gt;<br>
                &lt;meta name="description" content="这是一个 HTML5 学习页面"&gt;<br><br>
                
                &lt;!-- 关键词 --&gt;<br>
                &lt;meta name="keywords" content="HTML5, 学习, 教程"&gt;<br><br>
                
                &lt;!-- 作者信息 --&gt;<br>
                &lt;meta name="author" content="作者名称"&gt;
            </div>
            
            <h3>meta 标签说明：</h3>
            <table>
                <tr>
                    <th>标签</th>
                    <th>作用</th>
                </tr>
                <tr>
                    <td><code>&lt;meta charset="UTF-8"&gt;</code></td>
                    <td>指定文档的字符编码，UTF-8 支持几乎所有的语言字符</td>
                </tr>
                <tr>
                    <td><code>&lt;meta name="viewport"...&gt;</code></td>
                    <td>控制页面在移动设备上的显示方式，使页面宽度等于设备宽度并设置初始缩放级别</td>
                </tr>
                <tr>
                    <td><code>&lt;meta name="description"...&gt;</code></td>
                    <td>提供页面的简短描述，用于搜索引擎结果页面的摘要</td>
                </tr>
                <tr>
                    <td><code>&lt;meta name="keywords"...&gt;</code></td>
                    <td>提供与页面内容相关的关键词，有助于搜索引擎索引</td>
                </tr>
                <tr>
                    <td><code>&lt;meta name="author"...&gt;</code></td>
                    <td>指定页面的作者</td>
                </tr>
            </table>
        </div>
        
        <div class="note">
            <p><strong>重要提示：</strong> 正确设置 meta 标签对于搜索引擎优化(SEO)和确保您的网站在各种设备上正确显示非常重要。</p>
        </div>
    </section>
    
    <section>
        <h2>HTML5 文档结构的最佳实践</h2>
        <ul>
            <li>始终包含文档类型声明</li>
            <li>指定正确的字符编码</li>
            <li>包含视口元标记以确保响应式设计</li>
            <li>为文档提供有意义的标题</li>
            <li>使用适当的语言属性</li>
            <li>添加有用的元数据，如描述和关键词</li>
            <li>确保 HTML 结构正确嵌套</li>
        </ul>
    </section>
    
    <footer>
        <p>&copy; 2023 HTML5 学习指南。保留所有权利。</p>
    </footer>
</body>
</html>